<template>
    <div>
        <h2>{{msg}}</h2>
        <hr>
        <!--引用vuex中的state属性-->
        <h3>直接引用:{{$store.state.count}}</h3>
        <h3>计算属性:{{count}}</h3>
        <p>
            <!-- <button @click="$store.commit('add')">add</button>
            <button @click="$store.commit('reduce')">reduce</button> -->
            <button @click='add(3)'>add</button>
            <button @click='reduce'>reduce</button>
        </p>

        <p>
            <button @click='addAction'>addAction</button>
            <button @click='reduceAction'>reduceAction</button>
        </p>
    </div>
</template>

<script>
import store from '@/vuex/store';

// 使用mapState来替代对state的引用,然后使用 computed: mapState(['count']), 来做值(store.state)的引用
// 使用mapMutations来替代对mutations的引用 methods: mapMutations(['add','reduce']), 来做方法(store.mutations)的引用
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
export default {
    data(){
        return {
            msg: 'hello vuex'
        }
    },

    // 赋值store中的count到本页面的值中(方法1),直接使用计算属性.通过this.$store.state来获取数据
    // computed: {
    //     count(){
    //         return this.$store.state.count;
    //     }
    // },

    // 赋值store中的count到本页面的值中(方法2)
    // 先引入{mapState},然后通过mapState来获取
    // computed: mapState({

    //     // 使用{}包裹了函数体的形式,需要加return
    //     // count: (state)=>{
    //     //     return state.count;
    //     // }

    //     // 只有一个参数可以不使用()来包裹参数.
    //     // 只有一行代码可以不使用{}来包裹函数体,并且可以省略return 关键字
    //     count: state => state.count
        
    // }),

    // 赋值store中的count到本页面的值中(方法3)
    // 这里直接使用数组的形式,来把需要注入的值的名字写进去
    
    //computed: mapState(['count']),

    // 这里是直接使用方法
    // methods: {
    //     add(){
    //         // 传递参数
    //         // 提交的时候,第一个参数个mutations中的方法名字,后面的参数是方法调用的实际参数
    //         this.$store.commit('add',10);
    //     },
    //     reduce(){
    //         this.$store.commit('reduce');
    //     }
    // },

    // 使用getters
    computed: {
        ...mapState(['count']),
        // 测试actions,注释掉getters先
        // ...mapGetters(['count'])
    },

    methods: {
        ...mapMutations(['add','reduce']),
        ...mapActions(['addAction','reduceAction'])
    },
    store: store
}
</script>
